<template>
	<view>
		<view class="titleBar">
			<span>{{title}}</span>
			<br />
			<p>发布于：{{$u.timeFormat(createTime, 'yyyy年mm月dd日')}}</p>
		</view>
		<view class="u-content">
			<u-parse :html="content"></u-parse>
		</view>
		<view class="addLog">
			<u-cell-group>
				<u-cell-item title="收藏" :arrow="false">
					<u-icon slot="icon" size="32" name="star-fill"></u-icon>
					<u-switch slot="right-icon" v-model="checked" @change="change()"></u-switch>
				</u-cell-item>
			</u-cell-group>
		</view>
		<countdown-component :countdownSeconds="30" @countdown-finished="countdownFinished()">
		</countdown-component>
		<u-toast ref="uToastS" />
	</view>
</template>

<script>
	import CountdownComponent from '@/components/uni/countdown-component.vue';
	export default {
		components: {
			CountdownComponent
		},
		data() {
			return {
				content: '',
				title: '',
				createTime: '',
				id: 0,
				checked: false,
				timer: null,
				userId:null,
			}
		},
		onLoad(option) {
			if(uni.getStorageSync('lifeData').vuex_user.user == undefined ||
			 uni.getStorageSync('lifeData').vuex_user.user == null){
				this.$u.route('/pages/login/login')
				return
			}
			this.userId = uni.getStorageSync('lifeData').vuex_user.user.userId;
			this.id = option.id
			this.title = option.title
			this.createTime = option.createTime
			var url = "/api/artApi/" + this.id
			this.$u.get(url).then(result => {
				console.log(result.data)
				this.content = result.data.content
			});
			this.$u.get('/api/start/' + this.id + '/' + this.userId).then(
				result => {
					if (result.data == null || result.data.isStarted == 0) {
						console.log(result, "resourceUsage1321s")
						return this.checked = false;
					}
					this.checked = true;
				});
		},
		methods: {
			countdownFinished(){
				console.log("jifengjia1")
				var url = "/api/points"
				this.$u.post(url, {
					'userId': this.userId,
					'articleId': this.id,
					'points': 1,
				}).then(result => {
					// debugger
					if (result.code === 200) {
						this.$refs.uToastS.show({
							title: '您已阅读30秒获得1积分',
							type: 'success',
						})
					}
				});
			},
			// switch打开或者关闭时触发，值为true或者false
			// 即使不监听此事件，this.checked此时也会相应的变成true或者false
			change(status) {
				console.log(status);
				var url = "/api/start"
				var params = {
					'atrId': this.id,
				}
				this.$u.post(url, {
					'atrId': this.id,
					'userId': this.userId,
					'isStarted': status == true ? 1 : 0
				}, ).then(result => {
					console.log(result.data)
				});
			},
		}

	}
</script>

<style lang="scss" scoped>
	.addLog {
		// color: red;
		// background-color: blue;
		width: 100%;
		opacity: 0.95;
		position: fixed;
		right: 1px;
		bottom: calc(var(--window-bottom) + .5px);
		z-index: 1030;
		// margin-bottom: 10;
	}

	.u-content {
		margin-top: 60rpx;
		margin-left: 15rpx;
		color: black;
	}

	.titleBar {
		color: black;
		text-align: left;
		font-size: 17px;
		font-weight: bold;
		margin-top: 10px;
		margin-left: 15rpx;
	}

	.titleBar p {
		margin-top: 10px;
		font-size: 8px;
		color: #848484;
		font-weight: normal;
	}
</style>